<!DOCTYPE html>
<html>
<head>
	<title>徽章与巨幕</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
	<div class="container">
		<a href="#">短信消息<span class="badge">30</span></a>
		<!-- 可能在IE8的时候不会被支持，需要注意细节 -->
		<button class="btn btn-success" type="button">Massages<span class="badge">100</span></button>
	</div>

	<ul class="nav nav-pills" role="rablist">
		<li role="presentation" class="active"><a href="#">Home<span class="badge">10</span></a></li>
		<li role="presentation"><a href="#">Profile<span class="badge">100</span></a></li>
		<li role="presentation"><a href="#">Massages<span class="badge">5</span></a></li>
	</ul>

	<!-- 巨幕的实现：用来展示重要的信息 -->
	<div class="jumbotron">
		<div class="container">
			<h1>Hello,World</h1>
			<p>欢迎去阿文是古巴二公分长的</p>
			<p><a href="#" class="btn btn-info btn-lg" role="button">Learn More</a></p>
		</div>
	</div>
</body>
</html>